<template>
  <div class="header-count">
    <div class="left">
      <div>
        <img
          src="../../public/logo.png"
          width="40px"
          height="40px"
          alt="新工商"
        />
      </div>
      <h1>
        <router-link to="/index">毕业论文(设计)管理系统</router-link>
      </h1>
    </div>
    <div class="right">
      <span class="line"></span>
      <div>
        <i
          class="el-icon-date"
          style="font-size: 24px; font-weight: bolder"
        ></i>
        <span style="margin: 0 40px 0 15px; font-size: 16px">2024届</span>
      </div>
      <span class="line"></span>
      <div>
        <i
          class="el-icon-user"
          style="font-size: 24px; font-weight: bolder"
        ></i>
        <span style="margin: 0 40px 0 15px; font-size: 16px">指导教师</span>
      </div>
      <span class="line"></span>
      <div class="gap">
        <router-link to="/message">
          <el-badge :is-dot="true">
            <i class="el-icon-s-promotion" style="font-size: 24px"></i>
          </el-badge>
        </router-link>
      </div>
      <div style="margin-left: 20px">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="font-size: 17px">
            {{ usename
            }}<i
              class="el-icon-arrow-down el-icon--right"
              style="font-weight: bolder"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              icon="el-icon-switch-button"
              @click.native="logout"
              >退出登录</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-edit-outline"
              >修改密码</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Myheader",
  data() {
    return {
      usename: "",
    };
  },
  mounted() {
    this.usename = localStorage.getItem("userName");
  },
  methods: {
    logout() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.header-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
}
.left {
  display: flex;
  align-items: center;
}
a {
  color: inherit;
  text-decoration: none;
}
h1 {
  margin: 15px;
  font-size: 25px;
}
.right {
  display: flex;
  align-items: center;
}
.line {
  margin-right: 35px;
  border-right: 3.5px solid #f6f6f6;
  display: inline-block;
  height: 40px;
}
</style>